Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close

How to use Figma tokens JSON

Figma tokens json
{
"Default-cs-light": {
  "Accent Colors": {
    "primary": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "secondary": {
      "value": "#4fb2df",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#ffffff",
      "type": "color"
    },
    "code": {
      "value": "#eff1f5",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#f1f3f8",
      "type": "color"
    },
    "step-2": {
      "value": "#141516",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "disabled": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "focused": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "hover": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "pressed": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text": {
      "value": "#1c1b1f",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#362fd9",
      "type": "color"
    },
    "border": {
      "value": "#362fd9",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(44, 201, 181, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#2cbfac",
      "type": "color"
    },
    "hover": {
      "value": "#362fd9",
      "type": "color"
    },
    "pressed": {
      "value": "#2cc9b5",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#4fb2df",
      "type": "color"
    },
    "border": {
      "value": "#362fd9",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(79, 178, 223, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#4fb1df",
      "type": "color"
    },
    "hover": {
      "value": "#40afe1",
      "type": "color"
    },
    "pressed": {
      "value": "#4fb2df",
      "type": "color"
    },
    "text": {
      "value": "#362fd9",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#909192",
      "type": "color"
    },
    "border": {
      "value": "#e2e4e7",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(85, 99, 117, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#e0e2e6",
      "type": "color"
    },
    "hover": {
      "value": "#c7cbd1",
      "type": "color"
    },
    "pressed": {
      "value": "#3b4047",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#4acdcd",
      "type": "color"
    },
    "five": {
      "value": "#a34acd",
      "type": "color"
    },
    "four": {
      "value": "#cd814a",
      "type": "color"
    },
    "nine": {
      "value": "#4ecc39",
      "type": "color"
    },
    "one": {
      "value": "#cd4a88",
      "type": "color"
    },
    "seven": {
      "value": "#bbcd4a",
      "type": "color"
    },
    "six": {
      "value": "#cd4a4a",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#4aa6cd",
      "type": "color"
    },
    "two": {
      "value": "#7ccd4a",
      "type": "color"
    }
  },
  "Error Colors": {
    "base": {
      "value": "#f5bdbb",
      "type": "color"
    },
    "border": {
      "value": "#df2b2b",
      "type": "color"
    },
    "text": {
      "value": "#c62a21",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#c4edfd",
      "type": "color"
    },
    "border": {
      "value": "#205694",
      "type": "color"
    },
    "text": {
      "value": "#205694",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#362fd9",
      "type": "color"
    },
    "border-strong": {
      "value": "#362fd9",
      "type": "color"
    },
    "scrim": {
      "value": "#007f9b",
      "type": "color"
    },
    "shadow": {
      "value": "#007f9b",
      "type": "color"
    },
    "text": {
      "value": "#141516",
      "type": "color"
    },
    "text-strong": {
      "value": "#141516",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#e3f0c4",
      "type": "color"
    },
    "border": {
      "value": "#3d741f",
      "type": "color"
    },
    "text": {
      "value": "#467b28",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#fbefba",
      "type": "color"
    },
    "border": {
      "value": "#966220",
      "type": "color"
    },
    "text": {
      "value": "#966220",
      "type": "color"
    }
  }
},
"Default-cs-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#2dd4bf",
      "type": "color"
    },
    "secondary": {
      "value": "#4fb2df",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#0f121f",
      "type": "color"
    },
    "code": {
      "value": "#2b303b",
      "type": "color"
    },
    "overlay": {
      "value": "rgba(0, 0, 0, 0.8)",
      "type": "color"
    },
    "step-1": {
      "value": "#191d30",
      "type": "color"
    },
    "step-2": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Danger Colors": {
    "base": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "border": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "disabled": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "focused": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "hover": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "pressed": {
      "value": "#1c1b1f",
      "type": "color"
    },
    "text": {
      "value": "#1c1b1f",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#362fd9",
      "type": "color"
    },
    "border": {
      "value": "#362fd9",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(44, 201, 181, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#2cbfac",
      "type": "color"
    },
    "hover": {
      "value": "#362fd9",
      "type": "color"
    },
    "pressed": {
      "value": "#2cc9b5",
      "type": "color"
    },
    "text": {
      "value": "#feffff",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#4fb2df",
      "type": "color"
    },
    "border": {
      "value": "#362fd9",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(79, 178, 223, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#4fb1df",
      "type": "color"
    },
    "hover": {
      "value": "#40afe1",
      "type": "color"
    },
    "pressed": {
      "value": "#4fb2df",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#ffffff",
      "type": "color"
    },
    "border": {
      "value": "#e2e4e7",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(85, 99, 117, 0.1)",
      "type": "color"
    },
    "focused": {
      "value": "#e0e2e6",
      "type": "color"
    },
    "hover": {
      "value": "#c7cbd1",
      "type": "color"
    },
    "pressed": {
      "value": "#3b4047",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#4acdcd",
      "type": "color"
    },
    "five": {
      "value": "#a34acd",
      "type": "color"
    },
    "four": {
      "value": "#cd814a",
      "type": "color"
    },
    "nine": {
      "value": "#4ecc39",
      "type": "color"
    },
    "one": {
      "value": "#cd4a88",
      "type": "color"
    },
    "seven": {
      "value": "#bbcd4a",
      "type": "color"
    },
    "six": {
      "value": "#cd4a4a",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#4aa6cd",
      "type": "color"
    },
    "two": {
      "value": "#7ccd4a",
      "type": "color"
    }
  },
  "Error Colors": {
    "base": {
      "value": "#f5bdbb",
      "type": "color"
    },
    "border": {
      "value": "#df2b2b",
      "type": "color"
    },
    "text": {
      "value": "#c62a21",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#c4edfd",
      "type": "color"
    },
    "border": {
      "value": "#205694",
      "type": "color"
    },
    "text": {
      "value": "#205694",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#362fd9",
      "type": "color"
    },
    "border-strong": {
      "value": "#362fd9",
      "type": "color"
    },
    "scrim": {
      "value": "#007f9b",
      "type": "color"
    },
    "shadow": {
      "value": "#007f9b",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    },
    "text-strong": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#e3f0c4",
      "type": "color"
    },
    "border": {
      "value": "#3d741f",
      "type": "color"
    },
    "text": {
      "value": "#467b28",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#fbefba",
      "type": "color"
    },
    "border": {
      "value": "#966220",
      "type": "color"
    },
    "text": {
      "value": "#966220",
      "type": "color"
    }
  }
}
}
To learn more about how to use this json with Figma, visit here
Stand Alone Colors
Below are standalone color definitions we use.
.border
.border strong
.text
.text strong
.shadow
.scrim
$inherited.colors.custom.one
dark:
#362FD9
light:
#362FD9
we use
$inherited.colors.custom.one
for
custom one
Background Colors
Below are background color definitions we use.
.base
.step-1
.step-2
.overlay
.code
$inherited.colors.custom.one
dark:
#0F121F
light:
#FFFFFF
we use
$inherited.colors.custom.one
for
custom one
CTA Primary Colors
Below are cta primary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#362FD9
light:
#362FD9
we use
$inherited.colors.custom.one
for
custom one
CTA Secondary Colors
Below are cta secondary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#4fb2df
light:
#4fb2df
we use
$inherited.colors.custom.one
for
custom one
CTA Tertiary Colors
Below are cta tertiary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#FFFFFF
light:
#909192
we use
$inherited.colors.custom.one
for
custom one
CTA Danger Colors
Below are cta danger color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#1C1B1F
light:
#1C1B1F
we use
$inherited.colors.custom.one
for
custom one
Accent Colors
Below are accent color definitions we use.
.primary
.secondary
.tertiary
$inherited.colors.custom.one
dark:
#2dd4bf
light:
#2dd4bf
we use
$inherited.colors.custom.one
for
custom one
Error Colors
Below are error colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#f5bdbb
light:
#f5bdbb
we use
$inherited.colors.custom.one
for
custom one
Success Colors
Below are success colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#e3f0c4
light:
#e3f0c4
we use
$inherited.colors.custom.one
for
custom one
Info Colors
Below are info colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#c4edfd
light:
#c4edfd
we use
$inherited.colors.custom.one
for
custom one
Warning Colors
Below are warning color definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#fbefba
light:
#fbefba
we use
$inherited.colors.custom.one
for
custom one
Custom Colors
Below are custom color definitions we use.
.one
.two
.three
.four
.five
.six
.seven
.eight
.nine
.ten
$inherited.colors.custom.one
dark:
#CD4A88
light:
#CD4A88
we use
$inherited.colors.custom.one
for
custom one